<template>
  <div class="car" v-if="visible">
    <van-popup
      class="carPop"
      v-model="visible"
      position="right"
      @click-overlay="onClickLeft"
      :close-on-click-overlay="false"
    >
      <!-- 搜索 -->
      <div class="search_content">
        <van-nav-bar
          title="车辆选择"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
        <van-search
          v-model="requestParams.codeNo"
          placeholder="请输入车架号或者车牌号"
          shape="round"
          @search="initData"
          @clear="clearSearch"
        />
        <div class="addCar flex" @click="goAddCar()">
          <div class="flex">
            <i class="iconfont icon-car"></i>
            新增车辆
          </div>
          <i class="iconfont icon-right"></i>
        </div>
      </div>

      <div class="searchVal" v-if="recordList && recordList.length">
        搜索结果({{ recordList.length }}条)
      </div>
      <!-- 车辆列表 -->
      <!-- 列表 -->
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="loadData"
          :immediate-check="false"
          v-if="recordList && recordList.length != 0"
        >
          <div class="carList" v-if="recordList && recordList.length">
            <div
              class="carItem"
              v-for="(item, index) in recordList"
              :key="index"
              @click="selectCar(item)"
            >
              <div class="name">{{ item.carNo }}</div>
              <div class="vin">{{ item.vinCode }}</div>
            </div>
          </div>
        </van-list>
        <van-empty class="noContent" description="暂无数据" v-else />
      </van-pull-refresh>
    </van-popup>
    <div class="loading" v-if="loading">
      <van-loading size="30px" class="loadbox" color="#fff" text-color="#fff">
        加载中...
      </van-loading>
      <div class="mask"></div>
    </div>
  </div>
</template>

<script>
import { Search, Empty, Popup } from "vant";
import carApi from "@/api/carApi";
import { getCookies } from "@/utils/util.js";

export default {
  components: {
    Search,
    Empty,
    Popup,
  },
  props: {
    fixCenterId: {
      type: String,
      default: null,
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      searchVal: "",
      carList: [],
      // 分页参数
      loading: false,
      finished: false,
      refreshing: false,
      isLoadData: false,
      requestParams: {
        codeNo: "", //车架号或者车牌号，String，必填
        pageNo: 1, //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
        lastStartDate: "", //上次进场开始时间，日期yyyy-MM-dd
        lastEndDate: "", //上次进场结束时间，日期yyyy-MM-dd
        fixCenterId: this.fixCenterId, //维修中心ID值
        serverPsnId: "", //所属服务顾问，ID值
        fixCenterName: "",
        serverPsnName: "",
        customerName: "", //客户名称，模糊查询
        isUsedCoo: "", //是否有待使用券，1为是
        userId: getCookies("userId"), //用户ID，必填，String
      },
      recordList: [],
    };
  },
  watch: {
    fixCenterId: {
      handler: function (val, oldVal) {
        if (val != oldVal) {
          this.requestParams.fixCenterId = val;
          this.initData();
        }
      },
      deep: true,
      immediate: false,
    },
    visible: {
      handler: function (val, oldVal) {
        if (val) {
          this.initData();
        }
      },
      deep: true,
      immediate: false,
    },
  },

  mounted() {
    // this.initData();
  },
  methods: {
    // 初始化列表
    initData() {
      this.requestParams.pageNo = 1;
      this.loadData();
    },
    // 获取列表
    loadData() {
      if (this.isLoadData) return;
      this.isLoadData = true;
      this.loading = true;
      this.finished = false;
      // console.log(this.isLoadData);
      carApi
        .getCarInfoList({ ...this.requestParams })
        .then((res) => {
          if (this.requestParams.pageNo == 1) {
            this.recordList = res.data || [];
          } else {
            this.recordList = this.recordList.concat(res.data || []);
          }
          this.requestParams.pageNo += 1;

          if (res.data.length < 10) {
            this.finished = true;
            this.isLoadData = true;
          } else {
            if (this.requestParams.pageNo == 2 && res.data.length >= 10) {
              this.loadData();
            }
          }
          if ((res.data && res.data.length == 0) || res.data == null) {
            this.finished = true;
            this.isLoadData = true;
          }

          this.isLoadData = false;
          this.loading = false;
        })
        .catch((res) => {
          this.isLoadData = false;
          this.loading = false;
        });
    },
    // 下拉刷新
    onRefresh() {
      // 清空列表数据
      this.recordList = [];
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.refreshing = false;
      this.initData();
    },
    goAddCar() {
      this.$router.push({ path: "/addCar" });
    },
    selectCar(data) {
      localStorage.setItem("carData", JSON.stringify(data));
      this.$emit("getCarData", data);
      this.$emit("close");
      // this.$router.go(-1)
    },
    clearSearch() {
      this.requestParams.codeNo = "";
      this.initData();
    },
    onClickLeft() {
      // this.$router.go(-1)
      this.$emit("close");
    },
  },
};
</script>

<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
}
.car {
  background: #fff;
  padding-top: 2.1rem;
}
.search_content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  border-bottom: 3px solid #f1f1f1;

  .addCar {
    background: #fff;
    padding: 0.2rem 0.3rem;
    font-size: 0.28rem;
    color: #333;
    justify-content: space-between;
    border-top: 1px solid #f1f1f1;
    .icon-car {
      color: #409eff;
      font-size: 0.42rem;
      margin-right: 0.2rem;
    }
    .icon-right {
      color: #ccc;
    }
  }
}
.searchVal {
  font-size: 0.28rem;
  color: #333;
  padding: 0.3rem 0.3rem;
}
.carList {
  padding-left: 0.3rem;
  background: #fff;
  margin-top: 98px;

  .carItem {
    background: #fff;
    padding: 0.25rem 0;
    border-bottom: 1px solid #f0f0f0;
    .name {
      font-size: 0.32rem;
      font-weight: bold;
      color: #333;
      margin-bottom: 0.15rem;
    }
    .vin {
      color: #666;
      font-size: 0.28rem;
    }
    &:last-child {
      border: none;
    }
  }
}
.carPop {
  width: 90%;
  height: 100%;
  overflow: auto;
}

.loading {
  z-index: 9999999;
  .mask {
    width: 90%;
    top: 0;
    left: 10%;
  }
}
</style>
